import { Meta } from '@storybook/blocks';
import YouTubeVideoPlayer from '@/components/YouTubeVideoPlayer';
import * as WrapStories from '../stories/Wrap.stories';

<Meta of={WrapStories} />

# Wrap

A widget that displays its children in multiple horizontal or vertical runs.

<YouTubeVideoPlayer videoId="z5iw2SeFx2M" />

## Example

```dart liveslice=Wrap
Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('AH')),
      label: Text('Hamilton'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('ML')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('HM')),
      label: Text('Mulligan'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('JL')),
      label: Text('Laurens'),
    ),
  ],
)
```

## Related Links

- https://api.flutter.dev/flutter/widgets/Wrap-class.html
- https://youtu.be/z5iw2SeFx2M
